<template>
	<view>
		<view class="header" style="position: relative;">
			<image src="../../static/images/gr-back.png" style="position: absolute;top: 0px;left: 0px;z-index: -1;width: 100%;height: 500rpx;"></image>
			<view class="touxiang" @tap="gosetting()">
				<view class="touxiang-icon"><image :src="touxiang"></image></view>
				<view class="nicheng">
					<text>{{ nicheng }}</text>
				</view>
			</view>
			<view class="number" v-if="role == 'p'">
				<view class="number-item">
					<view class="num">{{ user_shenhe.integral || 0 }}</view>
					<view class="num-name">积分</view>
				</view>
				<view class="number-item" @tap="gojuan()">
					<view class="num">{{ user_shenhe.coupons|| 0 }}</view>
					<view class="num-name">优惠券</view>
				</view>
				<view class="number-item" @tap="goshoucang()">
					<view class="num">{{ user_shenhe.collect|| 0 }}</view>
					<view class="num-name">收藏</view>
				</view>
			</view>
			<view class="number" v-if="role == 's'">
				<view class="number-item" style="width: 50%;">
					<view class="num">{{ user_shenhe.integral || 0 }}</view>
					<view class="num-name">积分</view>
				</view>
				<view class="number-item" style="width: 50%;" @tap="goshoucang()">
					<view class="num">{{user_shenhe.collect || 0}}</view>
					<view class="num-name">收藏</view>
				</view>
			</view>
		</view>
		<view class="btn-list" style="margin-top: -50rpx;padding: 30rpx 0px;box-sizing: border-box">
			<view class="btn-item" @tap="gocar()">
				<image src="../../static/images/geren1.png"></image>
				<view>购物车</view>
			</view>
			<view class="btn-item " @tap="zuji()">
				<image src="../../static/images/geren2.png"></image>
				<view>足迹</view>
			</view>
			<view class="btn-item " @tap="gomystore()" v-if="isShenqing">
				<image src="../../static/images/geren3.png"></image>
				<view>店铺预览</view>
			</view>
			<view class="btn-item " @tap="goapply()"  v-if="!isShenqing">
				<image src="../../static/images/geren3.png"></image>
				<view>商户申请</view>
			</view>
			<view class="btn-item mag-top" @tap="zhuangxiu()" v-if="role == 's'">
				<image src="../../static/images/geren4.png"></image>
				<view>店铺装修</view>
			</view>
			<view class="btn-item mag-top" @tap="fanyongshow()" v-if="role == 's'">
				<image src="../../static/images/geren5.png"></image>
				<view>返佣二维码</view>
			</view>
			<view class="btn-item mag-top" @tap="gojilu()" v-if="role == 's'">
				<image src="../../static/images/geren6.png"></image>
				<view>返佣记录</view>
			</view>
		</view>

		<view class="list-content">
			<view class="list">
				<view class="li " @tap="goorder()">
					<view class="icon"><image src="../../static/images/genren-icon1.png"></image></view>
					<view class="text">我的订单</view>
					<text class="ding-num">{{ user_shenhe.order_num }}</text>
					<image class="to" src="../../static/images/to.png"></image>
				</view>
				<view class="li " @tap="showtell()">
					<view class="icon" style="width: 35rpx;height: 35rpx;"><image src="../../static/images/kefu.png" style="width: 35rpx;height: 35rpx;"></image></view>
					<view class="text">联系客服</view>
					<!-- <text class="ding-num">{{ user_shenhe.order_num }}</text> -->
					<image class="to" src="../../static/images/to.png"></image>
				</view>
				<view class="li " @tap="goaddress()">
					<view class="icon"><image src="../../static/images/genren-icon3.png"></image></view>
					<view class="text">收货地址</view>
					<image class="to" src="../../static/images/to.png"></image>
				</view>
				<view class="li " @tap="gobangding()">
					<view class="icon"><image src="../../static/images/genren-icon4.png"></image></view>
					<view class="text">绑定手机号</view>
					<image class="to" src="../../static/images/to.png"></image>
				</view>
			</view>
			<!-- 返佣二维码 -->
			<view class="fanyong" v-show="isfanyong">
				<view class="mark" @tap="closefanyong"></view>
				<view class="fanyong-container">
					<image src="../../static/images/fanyong-back.png" class="fanyong-back"></image>

					<view class="fanyong-view">
						<canvas canvas-id="shareImg" style="width:300px;height:280px;background: #ffffff;margin-bottom: 15px;"></canvas>
						<!-- <image src="../../static/images/fenlei2.png" class="fanyong-img"></image>
						<view class="uni-row">
							<view class="erweima">
								<image src="../../static/images/fenlei3.png"></image>
							</view>
							<view class="wenan">
								本章为小程序框架配置、框架接口、WXML 和 WXS 等的参考文档，关于组件和 API 的详细参考文档请参见
							</view>
						</view>
						 -->

						<view class="uni-row caozuo-container">
							<!-- <view class="tishi">小程序优惠更多！</view> -->
							<view class="caozuo-item" @tap="saveimg()">
								<image src="../../static/images/xiazai.png"></image>
								<view>保存图片</view>
							</view>
							<view class="caozuo-item" style="position: relative;">
								<image src="../../static/images/weixn.png"></image>
								<view>分享给好友</view>
								<button class="shareBtn" open-type="share" data-name="pageshare"></button>
							</view>
							<!-- 	<view class="caozuo-item">
								<image src="../../static/images/fenxiang-icon.png"></image>
								<view>分享至朋友圈</view>
							</view> -->
						</view>
					</view>
					<image src="../../static/images/fan-close.png" class="fan-close" @tap="closefanyong"></image>
				</view>
			</view>
			<!-- 绑定手机号 -->
			<view v-show="isbangding">
				<view class="mark"></view>
				<view class="phone-kuang">
					<view class="bang-title">绑定手机号</view>
					<view class="uni-row border-bottom bang-item">
						<image src="../../static/images/bang-phone.png"></image>
						<input type="text" v-model="user_phone" placeholder="请输入手机号码" />
					</view>
					<view class="uni-row border-bottom bang-item" style="position: relative;">
						<image src="../../static/images/bang-code.png"></image>
						<input type="text" placeholder="请输入验证码" v-model="code" />
						<button class="code-btn" @tap="handleCode()" :disabled="disabled">{{ acquire }}</button>
					</view>
					<button class="bang-btn" @tap="bindphone()">立即绑定</button>
				</view>
				<image class="closebangding" src="../../static/images/fan-close.png" @tap="closebangding()"></image>
			</view>
			<view v-show="phone_show">
				<view class="mark" @tap="closetell()"></view>
				<view class="phone-kuang kefu-kuang" style="top:500rpx">
					<button class="tell-btn" @tap="makephone()" style="margin-bottom: 20px;"><image src="../../static/images/bar-phone.png"></image>拨打电话</button>
					<button class="kefu-btn" open-type="contact"><image src="../../static/images/wx.png">在线客服</button>
				</view>
				
				<image class="closebangding" src="../../static/images/fan-close.png" style="bottom: 250rpx;" @tap="closetell()"></image>
			</view>
		</view>
	</view>
</template>

<script>
import httpPath from '@/static/js/path.js';
import { getlogin } from '@/static/js/login.js';
import { isshangjia } from '@/static/js/login.js';
export default {
	data() {
		return {
			isfanyong: false,
			isbangding: false,
			userinfo: {},
			nicheng: '游客',
			touxiang: '/static/images/touxiang.png',
			wxinfo_id: '',
			user_shenhe: {}, //存储是否已经提交申请成为商家
			role: '',
			user_phone: '',
			acquire: '验证码',
			disabled: false,
			code: '',
			ctx: {},
			posterpath: '',
			erwimapath: '../../static/images/fenlei2.png',
			poster_text: '本章为小程序框架配置、框架接口、WXML 和 WXS 等的参考文档，关于组件和 API 的详细参考文档请参见的详细参考文档请参见的详细参考文档请参见',
			guanggao: '小程序优惠更多！',
			share_img: '',
			isShenqing:false,
			phone_show:false,
			tell:"",
		};
	},
	onShow() {
		this.userinfo = getlogin();
		if (this.userinfo.nickname) {
			this.nicheng = this.userinfo.nickname;
		}
		if (this.userinfo.head_url) {
			this.touxiang = this.userinfo.head_url;
		}
		this.getuser();
		this.role = isshangjia();
		this.getposterimg();
	
	},
	onLoad() {
		this.userinfo = uni.getStorageSync('user');
		this.getuser();
		this.role = isshangjia();
		if (this.userinfo.nickname) {
			this.nicheng = this.userinfo.nickname;
		}
		if (this.userinfo.head_url) {
			this.touxiang = this.userinfo.head_url;
		}
		this.wxinfo_id = this.userinfo.wxinfo_id;
		this.getposterimg();
	
	},
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
		}
		return {
			title: '酒仓小程序',
			path: '/pages/index/index',
			success: function(res) {
				uni.showToast({
					icon: 'none',
					title: '分享成功',
					duration: 2000
				});
			}
		};
	},
	methods: {
		showtell(){
			this.phone_show=true;
		},
		closetell(){
			this.phone_show=false;
		},
		/**
		 * @param {Object} phone拨打电话
		 */
		makephone(){
			uni.makePhoneCall({
				phoneNumber:this.tell
			})
		},
		gomystore(){
			uni.navigateTo({
				url:"../shopping/barinfo?id="+this.user_shenhe.id
			})
		},
		/**
		 * 生成图片并保存图片
		 */
		makepicture() {
			let $this = this;
			wx.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: 300,
				height: 285,
				destWidth: 900,
				destHeight: 855,
				fileType: 'jpg',
				canvasId: 'shareImg',
				success: function(res) {
					wx.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(res) {
							wx.showModal({
								content: '图片已保存到相册，赶紧晒一下吧~',
								showCancel: false,
								confirmText: '好哒',
								confirmColor: '#72B9C3',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									}
								}
							});
						}
					});
				},
				fail: function(res) {}
			});
		},

		/**
		 * 保存图片
		 */
		saveimg() {
			var $this = this;
			// 生产环境时 记得这里要加入获取相册授权的代码
			// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
			wx.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						wx.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								// 用户已经同意小程序相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
								$this.makepicture();
							}
						});
					} else {
						$this.makepicture();
					}
				}
			});
		},
		/**
		 * 将海报图片文字截成数组
		 * @param {Object} str 要截取的字符串
		 * @param {Object} num 每行字数
		 */
		getstrarr(str, num) {
			let strarr = [];
			while (str.length > num) {
				strarr.push(str.substring(0, num));
				str = str.substring(num, str.length);
			}
			if (str) {
				strarr.push(str);
			}
			return strarr;
		},
		/**
		 * 画要保存的图片
		 */
		drawimg() {
			let $this = this;
			$this.ctx = uni.createCanvasContext('shareImg', this);
			$this.ctx.setFillStyle('white'); //填充白色
			$this.ctx.fillRect(0, 0, 300, 285); //画出矩形白色背景
			if (this.posterpath === '') {
				this.posterpath = '/static/images/poster.png';
				$this.ctx.drawImage(this.posterpath, 5, 5, 290, 180);
				uni.getImageInfo({
					src: $this.erwimapath,
					success(res) {
						$this.ctx.drawImage(res.path, 5, 190, 80, 80);
						if ($this.poster_text.length > 40) {
							$this.poster_text = $this.poster_text.substring(0, 40);
							$this.poster_text = $this.poster_text + '...';
						}
						let arr = $this.getstrarr($this.poster_text, 15);
						let line = 20;
						let height = 185;
						for (let i = 0; i < arr.length; i++) {
							height = height + line;
							$this.ctx.setFillStyle('#333333');
							$this.ctx.setFontSize(14);
							$this.ctx.fillText(arr[i], 90, height, 200, 20);
						}
						$this.ctx.setFontSize(12);
						$this.ctx.setFillStyle('#999999');
						$this.ctx.fillText($this.guanggao, 190, 270);
						$this.ctx.stroke();
						$this.ctx.draw();
						
					}
				});
				
			} else {
				uni.getImageInfo({
					src: $this.posterpath,
					success(res) {
						console.log('res.path' + res.path);
						// $this.ctx.drawImage($this.posterpath, 5, 5, 290, 180);
						$this.ctx.drawImage(res.path, 5, 5, 290, 180);
						if ($this.poster_text.length > 40) {
							$this.poster_text = $this.poster_text.substring(0, 40);
							$this.poster_text = $this.poster_text + '...';
						}
						uni.getImageInfo({
							src: $this.erwimapath,
							success(res) {
								$this.ctx.drawImage(res.path, 5, 190, 80, 80);
								let arr = $this.getstrarr($this.poster_text, 15);
								let line = 20;
								let height = 185;
								for (let i = 0; i < arr.length; i++) {
									height = height + line;
									$this.ctx.setFillStyle('#333333');
									$this.ctx.setFontSize(14);
									$this.ctx.fillText(arr[i], 90, height, 200, 20);
								}
								$this.ctx.setFontSize(12);
								$this.ctx.setFillStyle('#999999');
								$this.ctx.fillText($this.guanggao, 190, 270);
								$this.ctx.stroke();
								$this.ctx.draw();
							}
						});
					}
				});
			}
		},
		/**
		 * 绑定电话号
		 */
		bindphone() {
			let phones = /^1(3|4|5|6|7|8|9)\d{9}$/;
			if (this.user_phone == '' || this.user_phone == null) {
				uni.showToast({ title: '请填写手机号', icon: 'none' });
				return false;
			} else if (!phones.test(this.user_phone)) {
				uni.showToast({ title: '请填写正确的手机号', icon: 'none' });
				return false;
			}
			if (this.code == '' || this.code == null) {
				uni.showToast({ title: '请填写验证码', icon: 'none' });
				return false;
			}
			uni.request({
				url: httpPath.filePath + '/index/wxinfo/publish',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { phone: this.user_phone, wxinfo_id: this.wxinfo_id, code: this.code },
				success: res => {
					if (res.data.code == 200) {
						uni.showModal({
							showCancel: false,
							content: res.data.msg
						});
						this.isbangding=false;
					} else {
						uni.showModal({
							showCancel: false,
							content: res.data.msg
						});
					}
				}
			});
		},
		// 获取验证码
		handleCode() {
			if (this.getCodeisWaiting) {
				uni.showToast({ title: '验证码不能重复发送', icon: 'none' });
				return;
			}
			let phones = /^1(3|4|5|6|7|8|9)\d{9}$/;
			if (!phones.test(this.user_phone)) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return false;
			}
			uni.request({
				url: httpPath.filePath + '/index/wxinfo/sendsms', //短信验证码。
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { phone: this.user_phone },
				success: res => {
					if (res.data.code && res.data.code == 200) {
						uni.showToast({ title: '验证码已发送', icon: 'none' });
						this.disabled = true;
						this.setTimer();
					} else {
						uni.showModal({
							showCancel: false,
							content: res.data.message
						});

						return;
					}
				}
			});
		},
		setTimer() {
			let holdTime = 60;
			this.Timer = setInterval(() => {
				if (holdTime <= 0) {
					this.disabled = false;
					this.acquire = '验证码';
					clearInterval(this.Timer);
					return;
				}
				holdTime--;
				this.acquire = holdTime + '(s)'
			}, 1000);
		},
		/**
		 * 前往收藏页面
		 */
		goshoucang() {
			uni.navigateTo({
				url: 'shoucanglist'
			});
		},
		/**
		 * 前往设置页面
		 */
		gosetting() {
			uni.navigateTo({
				url: 'setting'
			});
		},
		/**
		 * 获取海报信息
		 */
		getposterimg() {
			uni.request({
				url: httpPath.filePath + '/index/code/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.userinfo.wxinfo_id },
				success: res => {
					if (res.data.code == 200) {
						this.erwimapath = res.data.data.code;
						this.poster_text = res.data.data.poster_synopsis;
						this.posterpath = res.data.data.poster;
						this.drawimg();
					}
				}
			});
		},
		/**
		 * 获取用户是否已经申请商家
		 */ getuser() {
			console.log('获取用户是否已经申请商家');
			uni.request({
				url: httpPath.filePath + '/index/wxinfo/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.userinfo.wxinfo_id },
				success: res => {
					if (res.data.code == 200) {
						this.tell=res.data.data.tel;
						this.user_shenhe = res.data.data;
						if (this.user_shenhe.status == 1&&this.user_shenhe.audit==1) {
							if(this.user_shenhe.id!=""){
								this.isShenqing=true;
							}else{
								this.isShenqing = false;
							}
							this.userinfo.role = 's';
							this.role = 's';
						}else{
							this.isShenqing = false;
							this.userinfo.role = 'p';
							this.role = 'p';
						}
						uni.setStorage({
							key: 'user',
							data: this.userinfo,
							success: function() {}
						});
					}
				}
			});
		},
		closebangding() {
			this.isbangding = false;
		},
		gobangding() {
			this.isbangding = true;
		},
		gojilu() {
			uni.navigateTo({
				url: 'record'
			});
		},
		gojuan() {
			uni.navigateTo({
				url: 'juan'
			});
		},
		goorder() {
			uni.navigateTo({
				url: 'order'
			});
		},
		closefanyong() {
			this.isfanyong = false;
		},
		fanyongshow() {
			this.isfanyong = true;
		},
		zuji() {
			uni.navigateTo({
				url: '../shopping/zujilist'
			});
		},
		gocar() {
			uni.navigateTo({
				url: '../shopping/car'
			});
		},
		goapply() {
			uni.navigateTo({
				url: 'shenqing'
			});
		},
		goaddress() {
			uni.navigateTo({
				url: 'address?my='+'my'
			});
		},
		/**
		 * 店铺装修
		 */ zhuangxiu() {
			// uni.navigateTo({
			// 	url:"decoration"
			// })
			if (this.user_shenhe.status == 1) {
				uni.navigateTo({
					url: 'decoration'
				});
			} else if (this.user_shenhe.status == 0) {
				uni.showModal({
					showCancel: false,
					content: '您的申请还未审核通过,请耐心等待'
				});
			} else if (this.user_shenhe.status == 2) {
				uni.showModal({
					showCancel: false,
					content: '您的申请已驳回,请重新提交',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: 'apply'
							});
						}
					}
				});
			} else if (this.user_shenhe.status == 3) {
				uni.showModal({
					showCancel: false,
					content: '您还没有申请成为商家,请前去申请',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: 'shenqing'
							});
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">

page {
	background: #f9f9f9;
}
.kefu-kuang button{background: #FFFFFF;font-size: 28rpx;border: 1px  solid #7adba8;border-radius: 5px;}
.kefu-kuang button image{vertical-align: middle;width: 50rpx;height: 50rpx;margin-right: 10px;}
.shareBtn {
	position: absolute;
	top: 0rpx;
	left: 0rpx;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.header {
	width: 750rpx;
	padding-top: 80rpx;
	box-sizing: border-box;
	height: 500rpx;
	
	
	// background: -moz-linear-gradient(135deg, rgba(80, 80, 80, 1), rgba(51, 51, 51, 1));
	// background: -webkit-linear-gradient(135deg, rgba(80, 80, 80, 1), rgba(51, 51, 51, 1));
	// background: -o-linear-gradient(135deg, rgba(80, 80, 80, 1), rgba(51, 51, 51, 1));
}
.mag-top {
	margin-top: 10rpx;
}
.number {
	margin-top: 88rpx;
}
.btn-list,
.number,
.touxiang {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.number view {
	line-height: 50rpx;
	text-align: center;
}
.num {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
}
.num-name {
	font-size: 22rpx;
	color: #eeeeee;
}
.touxiang {
	margin-left: 30rpx;
}
.number-item {
	width: 33.3%;
}
.touxiang-icon {
	width: 149rpx;
	height: 149rpx;
	border: 5rpx solid #e6e6e6;
	box-shadow: inset 2px 2px 3px #c0c0c0;
	border-radius: 50%;
	overflow: hidden;
}
.touxiang-icon image {
	width: 149rpx;
	height: 149rpx;
}
.nicheng {
	width: 300rpx;
	line-height: 149rpx;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
	margin-left: 28rpx;
}
.btn-list {
	width: 686rpx;
	background: #ffffff;
	border-radius: 5px;
	margin: auto;
}
.btn-item {
	width: 33.3%;
}
.btn-item image {
	width: 86rpx;
	display: block;
	margin: auto;
	height: 86rpx;
}
.btn-item view {
	line-height: 50rpx;
	color: #333;
	font-size: 26rpx;
	text-align: center;
}

.list-content {
	width: 100%;
	margin: auto;
	overflow: hidden;
	border-radius: 15upx;
}
.ding-num {
	font-size: 22rpx !important;
	padding: 0px 10rpx;
	color: #ffffff;
	background: #7adba8;
	width: auto !important;
	height: auto !important;
	border-radius: 30rpx;
}

.list {
	box-sizing: border-box;
	width: 100%;
	border-bottom: 15upx solid #f1f1f1;

	&:last-child {
		border: none;
	}

	.li {
		width: 686rpx;
		height: 100upx;
		box-sizing: border-box;
		padding: 0;
		border-bottom: 1px solid rgb(243, 243, 243);
		display: flex;
		margin: auto;
		align-items: center;

		&.noborder {
			border-bottom: 0;
		}

		.icon {
			flex-shrink: 0;
			width: 31rpx;
			height: 31rpx;

			image {
				width: 31rpx;
				height: 31rpx;
                display:block ;
			}
		}

		.text {
			padding-left: 10upx;
			width: 100%;
			font-size: 28rpx;
			color: #333333;
		}
		.service {
			width: 100%;
			text-align: right;
			color: #323232;
		}
		.to {
			width: 45rpx;
			height: 35rpx;
		}
	}
}
.mark {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background: #000000;
	opacity: 0.5;
}
.fanyong-view,
.fanyong-container {
	position: fixed;
	left: calc(50% - 150px);
	top: 50px;
	width: 300px;
	height: 350px;
}
// .fanyong-view{padding: 5px;}
.erweima image,
.fanyong-back {
	width: 100%;
	height: 100%;
}
.fanyong-img {
	width: 630rpx;
	height: 440rpx;
}
.erweima {
	width: 131rpx;
	height: 131rpx;
	margin: 24rpx;
	margin-left: 0px;
}
.wenan {
	width: 400rpx;
	font-size: 28rpx;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 46rpx;
	height: 92rpx;
	margin-top: 20rpx;
}
.caozuo-container {
	width: 290px;
}
.tishi {
	position: absolute;
	top: -60rpx;
	right: 32rpx;
	font-size: 20rpx;
	color: #999999;
}
.caozuo-item {
	width: 50%;
}
.caozuo-item image {
	width: 59rpx;
	height: 59rpx;
	display: block;
	margin: auto;
}
.caozuo-item view {
	font-size: 13px;
	line-height: 50rpx;
	text-align: center;
}
.fan-close {
	position: fixed;
	bottom: 140rpx;
	right: 348rpx;
	width: 54rpx;
	height: 54rpx;
}
.phone-kuang {
	position: fixed;
	top: 340rpx;
	left: 32rpx;
	width: 686rpx;
	background: #ffffff;
	border-radius: 5px;
	padding: 53rpx 45rpx;
	box-sizing: border-box;
}
.bang-title {
	font-size: 32rpx;
	text-align: center;
	font-weight: bold;
}
.bang-item {
	height: 60rpx;
	line-height: 60rpx;
	margin-top: 40rpx;
}
.bang-item image {
	width: 45rpx;
	height: 45rpx;
	vertical-align: middle;
	margin-right: 64rpx;
}
.bang-item input {
	border: none;
	font-size: 28rpx;
}
.code-btn {
	width: 129rpx;
	height: 64rpx;
	color: rgba(56, 209, 128, 1);
	border: 1px solid rgba(56, 209, 128, 1);
	border-radius: 12rpx;
	position: absolute;
	top: -15rpx;
	font-size: 28rpx;
	right: 10rpx;
	padding: 0px;
	line-height: 64rpx;
}
.bang-btn {
	margin-top: 80rpx;
	width: 404rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(135deg, rgba(80, 80, 80, 1), rgba(51, 51, 51, 1));
	border-radius: 45rpx;
	font-size: 28rpx;
	color: #ffffff;
}
.closebangding {
	width: 54rpx;
	height: 54rpx;
	position: fixed;
	bottom: 120rpx;
	left: calc(50% - 27rpx);
}
</style>
